<!-- 新的我的 -->
<template>
    <div class="mui-content mui-scroll-wrapper">
        <div class="mui-scroll">
            <div class="mine">
                <!-- 顶部头像和设置 -->
                <div style="position:absolute;top:10px;right:10px;color:#fff;" @tap="intoSetting">
                    <span v-show="setShow" style="font-size:15px;text-align:right;right:10px;position:absolute;width:40px;" >设置</span>
                </div>
                <div class="top">
                    <div class="info">
                        <div class="avatar-wrapper">
                            <img :src="user.headimgurl" v-if="user.headimgurl">
                            <img  src="./hed.png" v-else>
                        <!-- </div>
                        <div class="name-wrapper" @tap="login"> -->
                            <span  @tap="login" class="name" v-if="user.nickname">{{user.nickname}}</span><span  @tap="login" class="name" v-else>{{loginMsg}}</span><span  @tap="login" class="icon-you-01" style="font-size:1.1rem;float:right;line-height:30px;color: #fff;margin-right:20px;font-weight:bold;"></span>
                           
                        </div>
                    </div>
                    <div   v-if="user.headimgurl" style="position:absolute;top:120px;left:85px;color:#fff">
                        <div>来自微信</div>
                    </div>
                </div>

                <!-- 横线分隔条 -->
                <cross-line></cross-line>

                <!-- 重要的栏目 -->
                <div class="important">
                    <cross-item name="消息中心" @tap.native="go('msgCenter')">
                        <!--an注：如果是彩色的图标 写法应按照此写法写-->
                        <span class="i-c  icon-xinx" style="color:#FFA519">
                            <span class="path1"></span><span class="path2"></span><span class="path3"></span>
                        </span>
                    </cross-item>
                    <cross-item name="关注" @tap.native="go('attent')">
                        <span class="i-c icon-guanzhu" style="color:#F48453">
                            <span class="path1"></span><span class="path2"></span>
                        </span>
                    </cross-item>
                    <!-- <cross-item name="现金券" @tap.native="go('cashCoupon')">
                        <span class="i-c icon-xianj" style="color:#F48453">
                            <span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span>
                        </span>
                    </cross-item> -->
                    <cross-item name="金融信息" @tap.native="goLoanInfo" >
                        <span class="i-c  icon-daikuan" style="color:#25AA88">
                            <span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span>
                        </span>
                    </cross-item>
                </div>
                <!-- 横线分隔条 -->
                <cross-line></cross-line>
                <!-- 次要的栏目 -->
                <div class="minor">
                    <cross-item name="关于我们" @tap.native="go('about')">
                        <span class="i-c icon-guanyuwomen" style="color:#FFA519">
                            <span class="path1"></span><span class="path2"></span><span class="path3"></span>
                        </span>
                    </cross-item>
                    <cross-item name="车城地址" @tap.native="goGaoDe">
                        <span class="i-c  icon-chech" style="color:#36B7D7">
                            <span class="path1"></span><span class="path2"></span>
                        </span>
                    </cross-item>
                </div>

                <!-- 横线分隔条 -->
                <cross-line></cross-line>

                <div class="important">
                    <cross-item name="服务条款" @tap.native="go('clause')">
                        <span class="i-c icon-falvtiaokuan" style="color:#FFA519">
                            <span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span>
                        </span>
                    </cross-item>
                    <cross-item name="意见反馈" @tap.native="go('feedback')">
                        <span class="i-c icon-yijianfankui-01" style="color:#f98d43;">
                            <span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span>
                        </span>
                    </cross-item>
                </div>
                <p style="margin-top:10px;text-align:center;color: #8b8b8b;width:100%;">version:{{version}}</p>
            </div>
        </div>
    </div>
</template>

<script>
    import TabBar from '@/components/base/tab-bar/tab-bar'
    import CrossLine from '@/components/base/cross-line/cross-line'
    import CrossItem from '@/components/base/cross-item/cross-item'
    import mui from 'static/js/mui'
    //import { upImg } from '@/api/user'
    import { getToken } from '@/utils/auth'
    import { getLoanInfo } from '@/api/user'
    import storage from '@/utils/localstorage'
    import { mapGetters } from 'vuex'
    export default {
        components: {
            TabBar,
            CrossLine,
            CrossItem
        },
        data() {
            return {
                loginMsg:"用户登录",
                setShow:true,
                version:process.env.APP_VERSION,
                requestParams: {
                    customerId: ''
                }
            }
        },
        props: {},
        watch: {},
        methods:{
            goGaoDe() {
                 this.$router.push({
                    path:'/maps'
                })
              /*  window.open("https://uri.amap.com/poidetail?poiid=B0FFH0FQ0L&src=mypage&callnative=0") */
            },
            userMessage(){
                if(getToken('token', process.env.EXPIRATION_TIME)){
                    this.loginMsg=this.$store.getters.user.mobile
                }else{
                    this.setShow=false
                }
            },
            intoSetting(){
                this.$router.push({
                    path:'/setting'
                })
            },
            login() {
                if(!getToken('token', process.env.EXPIRATION_TIME)){
                    this.$router.push({path: '/login/'})
                }else{
                     this.$router.push({path: '/userMsg/'})
                }
            },
            go(type) {
                this.$router.push('./' + type)
            },
            goLoanInfo() {
                let loanInfo = storage.getLocalstorage('loanInfo')
                if(loanInfo){
                    this.$router.push('loanInfoLook')
                }else{
                    this.$router.push('loanInfo')
                }
            },
            handleGetLoanInfo() {
                this.requestParams.customerId = storage.getLocalstorage('user').id
                getLoanInfo(this.requestParams).then(res=>{
                    if(res.data.financial != null){
                        storage.setLocalstorage('loanInfo',res.data.financial.information)
                    }
                })  
            },
            portrait() {
                //呼出底部菜单
                if (mui.os.plus) {
                    var a = [{
                        title: '拍照'
                    }, {
                        title: '从手机相册选择'
                    }];
                    plus.nativeUI.actionSheet({
                        title: '修改头像',
                        cancel: '取消',
                        buttons: a
                    }, function (b) {
                        switch (b.index) {
                            case 0:
                                break;
                            case 1:
                                //拍照
                                this.getImages();
                                break;
                            case 2:
                                //打开相册
                                this.galleryImages();
                                break;
                            default:
                                break;
                        }
                    }, false);
                } else {
                    let btn = document.getElementById("inputFile");
                    btn.click();
                }
            },
            bind() {
                //测试formdata提交
                let myForm = document.getElementById('myForm');
                let formData = new FormData(myForm);
 
                formData.append("upfile", document.getElementById('inputFile').files[0]);


                //console.log(formData.get('upfile'))


                this.$store.dispatch('updateHeaderContentTypeStatus', 'multipart/form-data');
                /* upImg(formData).then(response => {
                    this.$store.dispatch('updateHeaderContentTypeStatus', 'application/json;charset=UTF-8');
                }) */
                /*   let that = this
                  let file = event.target.files[0]; */
                // 选择的文件是图片
                //let reader = new FileReader();//这是核心,读取操作就是由它完成.
                //reader.readAsText(selectedFile);//读取文件的内容,也可以读取文件的URL
                // reader.onload = function (e) {
                //当读取完成后回调这个函数,然后此时文件的内容存储到了result中,直接操作即可
                /*      //console.log(e)
                     that.uploadHeadImgWap(e.target.result);
                 };
                 try{
                     if (file.type.indexOf("image") == 0) {
                         reader.readAsDataURL(file);    
                     }
                 }catch(err){
                     //console.log(err);
                 } */
            },
            //拍照
            getImages() {
                let mobileCamera = plus.camera.getCamera();
                mobileCamera.captureImage(function (e) {
                    plus.io.resolveLocalFileSystemURL(e, function (entry) {
                        var path = entry.toLocalURL() + '?version=' + new Date().getTime();
                        this.uploadHeadImg(path);
                    }, function (err) {
                        //console.log("读取拍照文件错误");
                    });
                }, function (e) {
                    //console.log("er", err);
                }, function () {
                    filename: '_doc/head.png';
                });
            },
            //从本地相册选择
            galleryImages() {
                //console.log("你选择了从相册选择");
                plus.gallery.pick(function (a) {
                    plus.io.resolveLocalFileSystemURL(a, function (entry) {
                        plus.io.resolveLocalFileSystemURL('_doc/', function (root) {
                            root.getFile('head.png', {}, function (file) {
                                //文件已经存在
                                file.remove(function () {
                                    //console.log("文件移除成功");
                                    entry.copyTo(root, 'head.png', function (e) {
                                        let path = e.fullPath + '?version=' + new Date().getTime();
                                        this.uploadHeadImg(path);
                                    }, function (err) {
                                        //console.log("copy image fail: ", err);
                                    });
                                }, function (err) {
                                    //console.log("删除图片失败：（" + JSON.stringify(err) + ")");
                                });
                            }, function (err) {
                                //打开文件失败
                                entry.copyTo(root, 'head.png', function (e) {
                                    let path = e.fullPath + '?version=' + new Date().getTime();
                                    this.uploadHeadImg(path);
                                }, function (err) {

                                    //console.log("上传图片失败：（" + JSON.stringify(err) + ")");
                                });
                            });
                        }, function (e) {
                            //console.log("读取文件夹失败：（" + JSON.stringify(err) + ")");
                        });
                    });
                }, function (err) {
                    //console.log("读取拍照文件失败: ", err);
                }, {
                        filter: 'image'
                    });
            },
          
            //上传图片wap
            uploadHeadImgWap(img) {
                //选中图片之后，头像当前的照片变为选择的照片
                //console.log(img)
                let mainImg = document.getElementById('userImg');
                mainImg.src = img;
                /*ajax*/
            }
        },
        filters: {},
        computed:{
            ...mapGetters([
                'user'
            ])
        },
        created() { 
            this.userMessage()
            this.handleGetLoanInfo()
        },
        mounted() {
            mui.init({
            keyEventBind: {
                backbutton: true  //关闭back按键监听
                }
            });
            // //首页返回键处理
            // //处理逻辑：1秒内，连续两次按返回键，则退出应用；
            var first = null;
            mui.back = function() {
                //首次按键，提示‘再按一次退出应用’
                if (!first) {
                    first = new Date().getTime();//记录第一次按下回退键的时间
                    mui.toast('再按一次退出应用');//给出提示
                    // history.go(-1)//回退到上一页面
                    setTimeout(function() {//1s中后清除
                        first = null;
                    }, 1000);
                } else {
                    if (new Date().getTime() - first < 1000) {//如果两次按下的时间小于1s，
                        plus.runtime.quit();//那么就退出app
            } } };
            //竖向滚动
            scroll = mui('.mui-scroll-wrapper').scroll({
                scrollY: true, //是否竖向滚动
                scrollX: false, //是否横向滚动
                startX: 0, //初始化时滚动至x
                startY: 0, //初始化时滚动至y
                indicators: true, //是否显示滚动条
                deceleration: 0.0006, //阻尼系数,系数越小滑动越灵敏
                bounce: true //是否启用回弹
            });
        },
        destroyed() {}
    }

</script>

<style lang="scss" scoped>
    @import '~@/assets/scss/const.scss';
    @import '~@/assets/scss/mixin.scss';
    #myForm {
        display: none;
    }
    .icon-shezhi2{
        color: #ffffff!important;
    }
    .mui-bar-nav~.mui-content {
        padding-top: 0px;
    }

    .i-c {
        font-size: 1.1rem;
        position: relative;
        top: 5px;
        right: 5px;
        color:grey;
    }

    .mine {
        width: 100%;
        height: 100%;
        margin-bottom:60px;
        .top {
        background-image: url(header-img.jpg);//此为图片地址  
        background-size: 100% 100%;  
        -moz-background-size: 100% 100%;  
        -webkit-background-size: 100% 100%;  
        height:180px;
            .info {
                position:relative;
                top:80px;
                overflow:hidden;
                .avatar-wrapper {
                    width:100%;
                    padding-left:10px;
                    float:left;
                    img {
                        position: relative;
                        left:0px;
                        width:60px;
                        height:60px;
                        border-radius:100%;
                        /* border:2px solid #ccc; */
                    }
                    .name {
                        font-size: 0.7rem;
                        color: #fff;
                        line-height:30px;
                        margin-left:10px;
                        position: relative;
                        top:-25px;
                    }
                    .icon-you-01{
                        position: relative;
                        top:12px;
                    }
                }
                .name-wrapper {
                    /* width:70%;
                    float:left;
                    margin-top:15px;
                    .name {
                        font-size: 0.7rem;
                        color: #fff;
                        line-height:30px;
                        margin-left:10px;
                    } */
                  
                }
            }
        }
        .important {
            width: 100%;
            background-color: #fff;
            .cross-item {
                &:last-child {
                    border-bottom: none;
                }
            }
        }

        .minor {
            width: 100%;
            background-color: #fff;
            .cross-item {
                &:last-child {
                    border-bottom: none;
                }
            }
        }
        .exitover {
            width: 100%;
            padding: 20px;
            .tuichu {
                height: 35px;
                border: 1px solid #ddd;
                background:#ff6a27;
                margin: 0 auto;
                color: #fff;
                border-radius: 3px;
                text-align: center;
                line-height: 35px;
            }
        }
    }
</style>